<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Modal from './components/Modal.vue'
import SpaceBackground from './components/SpaceBackground.vue'

const heartModals = ref<Array<{id: number, show: boolean, title: string, content: string, x: number, y: number, isExploded: boolean}>>([])
const isExploded = ref(false)
const screenWidth = ref(0)
const screenHeight = ref(0)

// 爱心形状的坐标（相对位置）- 使用数学公式生成更准确的爱心轨迹
const generateHeartCoordinates = () => {
  const coordinates = []
  const scale = 2.5 // 缩放因子，控制爱心大小
  const step = 0.2 // 角度步长，控制点的密度
  
  // 使用参数方程生成爱心形状
  for (let t = 0; t <= 2 * Math.PI; t += step) {
    // 爱心参数方程
    const x = 16 * Math.pow(Math.sin(t), 3)
    const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)
    
    // 缩放并调整位置，增加间距
    coordinates.push({
      x: Math.round(x * scale * 10), // 乘以10增加间距到约20px
      y: Math.round(-y * scale * 10) // 负号让爱心正立
    })
  }
  
  return coordinates
}

const heartCoordinates = generateHeartCoordinates()

// 简短日常暖心话语列表
const warmMessages = [
  "🌞 早上要好好吃饭，早点睡，心情美好每一天",
  "💖 愿你被世界温柔以待，每天都有好心情",
  "☕ 喝杯热茶，暖暖心窝，好好爱自己",
  "🌟 今天也要加油哦，你是最棒的",
  "🌈 保持微笑，好运自然来",
  "🌻 简单生活，快乐每一天",
  "🍎 好好吃饭，好好睡觉，好好爱自己",
  "💪 新的一天，新的开始，加油",
  "🎯 专注当下，享受生活的美好",
  "🌸 花开有时，美好如期而至",
  "🌙 晚安，好梦，明天会更好",
  "☀️ 早安，阳光正好，心情更美",
  "🍀 愿你每天都有小确幸",
  "🎁 生活处处有惊喜，保持期待",
  "💝 爱自己，是终身浪漫的开始",
  "✨ 幸福其实很简单，珍惜当下",
  "🌊 心态决定一切，保持乐观",
  "🍂 秋天收获季，愿你硕果累累",
  "❄️ 冬天虽冷，但心要温暖",
  "🌧️ 雨后见彩虹，困难后是美好",
  "🌄 新的一天，新的希望",
  "🌅 夕阳无限好，珍惜每一天",
  "🎶 音乐是心灵的良药",
  "📚 知识改变命运，学习成就未来",
  "🏃 健康是最大的财富"
]

// 创建爱心弹窗
const createHeartModals = () => {
  // 创建随机索引数组，确保每个弹窗都有不同的随机内容
  const randomIndices = Array.from({length: heartCoordinates.length}, (_, i) => i)
    .sort(() => Math.random() - 0.5)
    .slice(0, heartCoordinates.length)
  
  heartModals.value = heartCoordinates.map((coord, index) => {
    // 如果是最后一个弹窗，显示特殊文字
    const isLastModal = index === heartCoordinates.length - 1
    // 随机选择warmMessages中的内容
    const randomIndex = randomIndices[index] % warmMessages.length
    const content = isLastModal ? "💝 阿浪，天天开心" : warmMessages[randomIndex]
    
    return {
      id: index,
      show: false,
      title: "天天开心",
      content: content,
      x: coord.x,
      y: coord.y,
      isExploded: false
    }
  })
}

// 冲击效果 - 将所有弹窗随机分布
const explodeHeartModals = () => {
  isExploded.value = true
  
  heartModals.value.forEach((modal, index) => {
    setTimeout(() => {
      modal.isExploded = true
      
      // 生成随机位置（屏幕范围内随机分布）
      const modalWidth = 200 // 弹窗宽度
      const modalHeight = 150 // 弹窗高度
      
      // 随机位置，确保弹窗完全在屏幕内
      modal.x = Math.random() * (screenWidth.value - modalWidth) - screenWidth.value / 2
      modal.y = Math.random() * (screenHeight.value - modalHeight) - screenHeight.value / 2
      
    }, index * 50) // 每个弹窗间隔50毫秒，快速分散
  })
}

// 逐个显示爱心弹窗
const showHeartModals = () => {
  heartModals.value.forEach((modal, index) => {
    setTimeout(() => {
      modal.show = true
      
      // 如果是最后一个弹窗，显示完后触发冲击效果
      if (index === heartModals.value.length - 1) {
        setTimeout(() => {
          explodeHeartModals()
        }, 1000) // 最后一个弹窗显示后1秒触发冲击效果
      }
    }, index * 300) // 每个弹窗间隔300毫秒，速度变慢
  })
}



// 页面加载时自动显示爱心弹窗
onMounted(() => {
  // 设置屏幕尺寸
  screenWidth.value = window.innerWidth
  screenHeight.value = window.innerHeight
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    screenWidth.value = window.innerWidth
    screenHeight.value = window.innerHeight
  })
  
  createHeartModals()
  // 注释掉显示弹窗的调用，以便专注修改流星效果
  showHeartModals()
})
</script>

<template>
  <!-- 深空背景组件 -->
  <SpaceBackground />
  
  <!-- 爱心形状弹窗 -->
  <div class="heart-container">
    <Modal 
      v-for="modal in heartModals" 
      :key="modal.id"
      v-model="modal.show" 
      :title="modal.title"
      :style="{ 
        position: 'fixed', 
        left: modal.isExploded ? `${modal.x + screenWidth / 2}px` : `calc(50% + ${(modal as any).x}px)`,
        top: modal.isExploded ? `${modal.y + screenHeight / 2}px` : `calc(50% + ${(modal as any).y}px)`,
        transform: modal.isExploded ? 'none' : 'translate(-50%, -50%)',
        zIndex: 1000 + modal.id,
        transition: 'all 0.5s ease-out'
      }"
    >
      <p>{{ modal.content }}</p>
    </Modal>
  </div>
</template>

<style scoped>

.heart-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.heart-container .modal-container {
  width: 200px !important;
  max-width: 90vw !important;
  max-height: 60vh !important;
  animation: heart-pop 0.5s ease-out;
}

.heart-container .modal-content {
  padding: 12px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  text-align: center;
}

.heart-container .toolbar {
  height: 30px !important;
  padding: 8px 12px !important;
}

.heart-container .toolbar-title {
  font-size: 11px !important;
}

.heart-container .toolbar-button {
  width: 8px !important;
  height: 8px !important;
}

.heart-container .toolbar-button svg {
  width: 8px !important;
  height: 8px !important;
}

@keyframes heart-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes explode-effect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.heart-container .modal-container.exploded {
  animation: explode-effect 0.3s ease-out;
}

h1 {
  color: #1d1d1f;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.button-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.apple-button {
  background: #007aff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.apple-button:hover {
  background: #0056cc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}

.apple-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.custom-content {
  text-align: left;
}

.custom-content h4 {
  margin: 0 0 16px 0;
  color: #1d1d1f;
  font-weight: 600;
}

.custom-content ul {
  margin: 16px 0;
  padding-left: 20px;
}

.custom-content li {
  margin: 8px 0;
  color: #515154;
}

.custom-image {
  text-align: center;
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.placeholder-image {
  font-size: 48px;
  margin-bottom: 12px;
}

.custom-image p {
  margin: 0;
  color: #86868b;
  font-size: 14px;
}
</style>
